<template>
	<view>
		<view class="top bg-gradual-blue padding text-center shadow-blur"></view>
		<view class="user bg-gradual-orange radius padding text-center shadow-blur">
			<view class="headImg padding">
				<view class="cu-avatar xl round margin-left imgs" :style="userInfo.head">
					<view class="cu-tag badge" :class="userInfo.sex===0?'cuIcon-male bg-pink':'cuIcon-female bg-blue'"></view>
				</view>
			</view>
			<view class="info">
				<view class="names">
					<view class="text-center text-xl padding">{{userInfo.pickName}}</view>
					<view class="padding text-center">
						<view class="cu-tag radius sm light bg-red">LV{{userInfo.vip}}</view>
					</view>
				</view>
				<view class="cu-progress radius margin-top">
					<view class="bg-gradual-blue" :style="length_style">{{userInfo.exp}}/{{userInfo.exp_full}} {{length}}</view>
				</view>
			</view>
		</view>
		<view class="myshow text-center shadow-blur">
			<view class="cu-list grid radius col-4 no-border">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*column" @tap="clickItem(item.url)">
					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="cu-list menu card-menu">
			<view class="cu-item arrow" v-for="(item,index) in menuList" :key="index">
				<view class="content">
					<text class="text-red" :class="['cuIcon-'+item.icon]"></text>
					<text class="text-red">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="bottomBtn padding flex flex-direction">
			<button class="cu-btn bg-red lg">注销登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			length_style() {
				return 'width:' + Math.floor((this.userInfo.exp / this.userInfo.exp_full) * 100) + "%"
			},
			length() {
				return Math.floor((this.userInfo.exp / this.userInfo.exp_full) * 100) + "%"
			}
		},
		data() {
			return {
				loading: false,
				userInfo: {
					pickName: '挽梦啊',
					sex: 1,
					vip: 5,
					exp: 98,
					exp_full: 100,
					head: 'background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);'
				},
				menuList: [{
					title: '账号中心',
					icon: 'lock',
					url: ''
				}, {
					title: '问题反馈',
					icon: 'writefill',
					url: ''
				}, {
					title: '应用设置',
					icon: 'settingsfill',
					url: ''
				}, {
					title: '检查更新',
					icon:'top',
					url: ''
				}, {
					title: '关于我们',
					icon:'info',
					url: ''
				}],
				cuIconList: [{
					cuIcon: 'footprint',
					color: 'red',
					badge: 120,
					name: '我的财富',
					url: '/duanzi'
				}, {
					cuIcon: 'font',
					color: 'red',
					badge: 1,
					name: '我的发表',
					url: '/meiwen'
				}, {
					cuIcon: 'picfill',
					color: 'red',
					badge: 0,
					name: '我的收藏',
					url: '/xinqing'
				}, {
					cuIcon: 'footprint',
					color: 'red',
					badge: 22,
					name: '历史足迹',
					url: '/qiandao'
				}],
				modalName: null,
				gridCol: 4,
				column: 1,
			}
		},
		methods: {
			clickItem(url) {
				console.log(url);
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 30upx;
	}

	.user {
		width: 93%;
		height: 220upx;
		margin: 30upx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.myshow {
		width: 93%;
		margin: 30upx auto;
	}

	.headImg {
		width: 30%;
		height: 200upx;
	}

	.imgs {
		margin: 0 auto;
	}

	.info {
		width: 60%;
		height: 200upx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.names {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.bottomBtn {
		margin-top: 10upx;
	}
</style>
